<template>
    <div class="demonstation">
      <h3>最受欢迎课程</h3>

      <el-carousel height="37vh" direction="vertical" motion-blur :autoplay="true">

        <el-carousel-item v-for="(item, index) in RecommendedCourseImg" :key="index">
          <div style="width: 100%; height: 100%" class="item" justify="center">

            <el-image style="width: auto; height: 100%" :src="item.src" :fit="fit" />
            <!-- <p style="font-weight:bold ;font-size:0.5em;color:balck">{{ item.name }}</p> -->
          </div>
        </el-carousel-item>

      </el-carousel>
    </div>
</template>

<script setup>
import {ref} from "vue";

const RecommendedCourseImg = ref([
    { name: "AIGC职业", src: new URL('/src/assets/course111.jpg',import.meta.url).href, alt: 'c1' },
    { name: "人工智能编程", src: new URL('../../assets/course119.jpg',import.meta.url).href,  alt: 'c1' },
    { name: "PowerBI 数据分析与可视化", src: new URL('../../assets/course180.jpg',import.meta.url).href, alt: 'c1' },
    { name: 'Scala技术基础', src:new URL('../../assets/course16.jpg',import.meta.url).href, alt: 'c3' },
    { name: 'Python网络爬虫', src:new URL('../../assets/course476.jpg',import.meta.url).href, alt: 'c3' },
    { name: 'Python机器学习', src:new URL('../../assets/course477.jpg',import.meta.url).href, alt: 'c3' },
])
</script>


<style scoped>
.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

/* .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
} */
</style>
